import React from 'react';
import PerimBtn from '@components/perimBtn/index.jsx';

import Tools from '@untils/tools.jsx';
import Request from '@service/ajax.js';
import {USERAPIS} from '@apis/index.js';

import './scss/login.scss';

const _req = new Request();

class Login extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      name: '',
      pwd: ''
    };

    this.setCallback = Tools.setCallback.bind(this);
  }

  userLogin() {
    let {name, pwd} = this.state;
    let data = { data: { name, pwd } };
    let options = Tools.objectAssign(USERAPIS.USERLOGIN, data);
    _req.axios(options).then(res => {
      Tools.setCookie(res);
      // 重那个页面过来回那个页面去
      let search = this.props.history.location.search;
      let redirect = decodeURIComponent(Tools.urlSearchObj(search, 'redirect'));
      Tools.seekPath.call(this, redirect ? redirect : '/layout/home');
    }, err => {
        Tools.tooltip({level: 'error', content: err.message||'登录失败'})
    });
  }

  render() {
    let { name, pwd } = this.state;

    return (
      <div className="login-page">
        <div className="login-box">
          <div className="box-left-part">
            <i className="login-logo"> </i>
          </div>
          <div className="box-right-part">
            <p className="app-name">登录智能内容监审平台</p>
            <ul className="ipt-options">
              <li className="option-list">
                <div className="ipt-line">
                  <input placeholder="请输入用户名" value={name}
                     onChange={e => this.setCallback({name: e.target.value})}
                     className="ipt-item" type="text"/>
                </div>
              </li>
              <li className="option-list">
                <div className="ipt-line">
                  <input placeholder="请输入密码" value={pwd}
                     onChange={e => this.setCallback({pwd: e.target.value})}
                    className="ipt-item"
                    type="password"/>
                </div>
              </li>
            </ul>
            <PerimBtn wrapClass={`login-btn ${!!name&&!!pwd?'':'disabled'}`}
              clickEvent={() => this.userLogin()}
            >登录</PerimBtn>
          </div>
        </div>
      </div>
    )
  }
}

export default Login;